<template>
        <div id="goods_delete" class="tab-pane">
          <table class="table table-bordered table-hover table-condensed table-striped">
            <thead>
              <!-- 头部 -->
              <tr class="active">
                <th class="text-center"><span @click="checkAll" class="cart-all2">全选</span></th>
                <th class="text-center">商品</th>
                <th class="text-center">单价</th>
                <th class="text-center">数量</th>
                <th class="text-center">小计</th>
                <th class="text-center">操作</th>
              </tr>
            </thead>
            <tbody>
              <DeleteItem v-for="itemObj of deleteList" :item="itemObj" :key="itemObj.id"/>
              <!-- 底部 -->
              <tr class="cart-bottom2">
                <td colspan="6" id="mytotal">
                  <div class="text-center font-weight-bolder text-info">
                    <div class="">
                      <span class="cart-bottom-span">已选择<span class="cart-total-num2">{{nowChecked}}</span>件商品</span>
                      <span class="cart-bottom-span">总计：<span class="cart-total-price2 ">{{totalPrice}}</span></span>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
       
</template>

<script>
import DeleteItem from "./DeleteItem";
export default {
  name: "DeleteList",
  data() {
    return {
      deleteList: [],
      nowChecked:0,
      totalPrice:0
    };
  },
  methods: {
     checkAll() {//全选
      this.deleteList.forEach(element => {
        element.isCheck = true;
      });
    },
    addItem(item) {//收到商品界面传入的元组并添加
      this.deleteList.push(item);
    },
    computePrice() {//计算总数
      let num = 0;
      let totalprice = 0;
      this.deleteList.forEach(item => {
        if (item.isCheck == true) {
          num += item.num;
          totalprice += item.num * item.price;
        }
      });
      this.nowChecked = num;
      this.totalPrice = totalprice.toFixed(2);
    },
    addTotalNum(idx) {//加号
      this.deleteList.forEach(item => {
        if (item.id == idx) {
          item.num++;
        }
      });
    },
    deleteTotalNum(idx) {//减号
      this.deleteList.forEach(item => {
        if (item.id == idx && item.num > 0) {
          item.num--;
        }
      });
    },
    changeChecked(idx, value) {//打勾
      this.deleteList.forEach(item => {
        if (item.id == idx) {
          item.isCheck = !item.isCheck;
          this.computePrice();
        }
      });
    },
    addDeleteItem(idx) {//将元组添加回商品列表
      this.deleteList.forEach((item, index) => {
        if (item.id == idx) {
          this.deleteList.splice(index, 1);
          this.$bus.$emit("addBackItem", item);
        }
      });
    }
  },
   watch:{
        deleteList:{
            deep:true,
            handler(){
                this.computePrice()
            }
        }
    },
  mounted() {
    this.$bus.$on("sendItem", this.addItem)//收到删除的元组
    this.$bus.$on('changeNewCheck',this.changeChecked)//勾选事件
    this.$bus.$on('addNewNum',this.addTotalNum)//加号
    this.$bus.$on('deleteNewNum',this.deleteTotalNum)//减号
    this.$bus.$on('deleteNewItem',this.addDeleteItem)//删除元组
  },
  beforeDestroy(){
    this.$bus.$off("sendItem")
    this.$bus.$off('changeNewCheck')
    this.$bus.$off('addNewNum')
    this.$bus.$off('deleteNewNum')
    this.$bus.$off('deleteNewItem')
  },
  components: {
    DeleteItem
  }
};
</script>

<style scoped lang="css" scoped>
</style>
